റിയാക്ടിന്റെ കോൺകറന്റ് റെൻഡറിംഗ് പൈപ്പ്ലൈൻ മാസ്റ്റർ ചെയ്യാം: ഫ്രെയിം ബജറ്റ് മാനേജ്മെന്റിനൊരു വഴികാട്ടി

ഇന്നത്തെ ചലനാത്മകമായ വെബ് ലോകത്ത്, തടസ്സങ്ങളില്ലാത്തതും പ്രതികരണശേഷിയുള്ളതുമായ ഒരു ഉപയോക്തൃ അനുഭവം നൽകുന്നത് പരമപ്രധാനമാണ്. ലോകമെമ്പാടുമുള്ള ഉപയോക്താക്കൾ ആപ്ലിക്കേഷനുകൾ സുഗമവും, സംവേദനാത്മകവും, തടസ്സങ്ങളില്ലാത്തതും (jank-free) ആകണമെന്ന് പ്രതീക്ഷിക്കുന്നു. റിയാക്ടിന്റെ കോൺകറന്റ് റെൻഡറിംഗിന്റെ വരവ്, പെർഫോമൻസിനെക്കുറിച്ചുള്ള നമ്മുടെ കാഴ്ചപ്പാടിൽ വിപ്ലവം സൃഷ്ടിച്ചു, ഈ ലക്ഷ്യങ്ങൾ കൈവരിക്കുന്നതിന് ശക്തമായ ടൂളുകൾ നൽകുന്നു. ഈ മാറ്റത്തിന്റെ ഹൃദയഭാഗത്ത് ഫ്രെയിം ബജറ്റ് മാനേജ്മെന്റ് എന്ന ആശയമാണ് സ്ഥിതിചെയ്യുന്നത്. ഈ സമഗ്രമായ ഗൈഡ് റിയാക്ടിന്റെ കോൺകറന്റ് റെൻഡറിംഗ് പൈപ്പ്ലൈൻ വിശദീകരിക്കുന്നു, ഒപ്പം വിവിധ ഉപകരണങ്ങളിലും നെറ്റ്‌വർക്ക് സാഹചര്യങ്ങളിലും സ്ഥിരമായി സുഗമമായ ഒരു യൂസർ ഇന്റർഫേസ് ഉറപ്പാക്കാൻ നിങ്ങളുടെ ഫ്രെയിം ബജറ്റ് എങ്ങനെ ഫലപ്രദമായി കൈകാര്യം ചെയ്യാമെന്ന് വ്യക്തമാക്കുന്നു.

ഫ്രെയിം ബജറ്റ് മനസ്സിലാക്കാം

റിയാക്ടിന്റെ പ്രത്യേക മെക്കാനിസങ്ങളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, ഫ്രെയിം ബജറ്റിന്റെ അടിസ്ഥാന ആശയം മനസ്സിലാക്കേണ്ടത് അത്യാവശ്യമാണ്. കമ്പ്യൂട്ടർ ഗ്രാഫിക്സിലും യുഐ ഡെവലപ്മെന്റിലും, ഒരു ഫ്രെയിം എന്നത് സ്ക്രീനിൽ പ്രദർശിപ്പിക്കുന്ന ഒരൊറ്റ ചിത്രമാണ്. ചലനത്തിന്റെയും സംവേദനാത്മകതയുടെയും പ്രതീതി നൽകാൻ, ഈ ഫ്രെയിമുകൾ അതിവേഗത്തിൽ റെൻഡർ ചെയ്യുകയും പ്രദർശിപ്പിക്കുകയും ചെയ്യുന്നു. മിക്ക ആധുനിക ഡിസ്പ്ലേകളുടെയും ലക്ഷ്യം സെക്കൻഡിൽ 60 ഫ്രെയിമുകൾ (FPS) ആണ്. ഇതിനർത്ഥം ഓരോ ഫ്രെയിമും ഏകദേശം 16.67 മില്ലിസെക്കൻഡിനുള്ളിൽ (1000ms / 60 FPS) റെൻഡർ ചെയ്ത് ഉപയോക്താവിന് മുന്നിൽ എത്തിക്കണം എന്നാണ്.

അതുകൊണ്ട്, ഒരു ഫ്രെയിമിന് ആവശ്യമായ എല്ലാ ജോലികളും പൂർത്തിയാക്കാൻ അനുവദിച്ചിട്ടുള്ള സമയമാണ് ഫ്രെയിം ബജറ്റ്. ഈ ജോലിയിൽ സാധാരണയായി ഉൾപ്പെടുന്നവ:

• JavaScript execution: നിങ്ങളുടെ റിയാക്ട് കമ്പോണന്റുകൾ, ഇവന്റ് ഹാൻഡ്‌ലറുകൾ, ബിസിനസ്സ് ലോജിക് എന്നിവ പ്രവർത്തിപ്പിക്കുന്നു.
• Layout calculation (Reflow): സ്ക്രീനിലെ എലമെന്റുകളുടെ സ്ഥാനവും വലുപ്പവും നിർണ്ണയിക്കുന്നു.
• Painting (Repaint): യുഐ നിർമ്മിക്കുന്ന പിക്സലുകൾ വരയ്ക്കുന്നു.
• Compositing: വ്യത്യസ്ത വിഷ്വൽ എലമെന്റുകളെ അടുക്കുകയും സംയോജിപ്പിക്കുകയും ചെയ്യുന്നു.

ഈ ഘട്ടങ്ങളിലേതെങ്കിലും അനുവദിച്ച സമയത്തേക്കാൾ കൂടുതൽ എടുക്കുകയാണെങ്കിൽ, ബ്രൗസറിന് കൃത്യസമയത്ത് ഒരു പുതിയ ഫ്രെയിം നൽകാൻ കഴിയില്ല. ഇത് ഫ്രെയിമുകൾ നഷ്ടപ്പെടുന്നതിനും, മുറിഞ്ഞതും പ്രതികരണശേഷിയില്ലാത്തതുമായ ഉപയോക്തൃ അനുഭവത്തിനും കാരണമാകുന്നു. ഇതിനെ സാധാരണയായി ജാങ്ക് (jank) എന്ന് പറയുന്നു.

റിയാക്ടിന്റെ കോൺകറന്റ് റെൻഡറിംഗ് പൈപ്പ്‌ലൈൻ വിശദീകരണം

പരമ്പരാഗത റിയാക്ട് റെൻഡറിംഗ് സിൻക്രണസും ബ്ലോക്ക് ചെയ്യുന്നതുമായിരുന്നു. ഒരു സ്റ്റേറ്റ് അപ്ഡേറ്റ് സംഭവിക്കുമ്പോൾ, റിയാക്ട് മാറ്റങ്ങൾ DOM-ൽ വരുത്തുകയും ഈ പ്രക്രിയ മെയിൻ ത്രെഡിനെ തടസ്സപ്പെടുത്തുകയും ചെയ്യുമായിരുന്നു. ഇത് ഉപയോക്തൃ ഇൻപുട്ട് കൈകാര്യം ചെയ്യുകയോ ആനിമേഷനുകൾ പ്രവർത്തിപ്പിക്കുകയോ പോലുള്ള മറ്റ് പ്രധാന ജോലികളെ തടസ്സപ്പെടുത്തുന്നു. കോൺകറന്റ് റെൻഡറിംഗ് റെൻഡറിംഗ് ടാസ്കുകളെ തടസ്സപ്പെടുത്താനും പുനരാരംഭിക്കാനുമുള്ള കഴിവ് നൽകിക്കൊണ്ട് ഇതിന് അടിസ്ഥാനപരമായ മാറ്റം വരുത്തുന്നു.

റിയാക്ടിന്റെ കോൺകറന്റ് റെൻഡറിംഗ് പൈപ്പ്‌ലൈനിന്റെ പ്രധാന സവിശേഷതകൾ ഇവയാണ്:

• Prioritization: റിയാക്ടിന് ഇപ്പോൾ വ്യത്യസ്ത റെൻഡറിംഗ് ടാസ്കുകൾക്ക് മുൻഗണന നൽകാൻ കഴിയും. ഉദാഹരണത്തിന്, ഒരു അടിയന്തിര അപ്ഡേറ്റിന് (ഉപയോക്താവ് ടൈപ്പ് ചെയ്യുന്നത് പോലെ) അത്ര അടിയന്തിരമല്ലാത്ത ഒന്നിനേക്കാൾ (പശ്ചാത്തലത്തിൽ ഡാറ്റ ലഭ്യമാക്കുന്നത് പോലെ) ഉയർന്ന മുൻഗണന നൽകും.
• Preemption: ഉയർന്ന മുൻഗണനയുള്ള ഒരു ടാസ്ക് വന്നാൽ, റിയാക്ടിന് താഴ്ന്ന മുൻഗണനയുള്ള റെൻഡറിംഗ് ടാസ്കിനെ തടസ്സപ്പെടുത്താൻ കഴിയും. ഇത് നിർണായകമായ ഉപയോക്തൃ ഇടപെടലുകൾ അധികസമയം തടസ്സപ്പെടുന്നില്ലെന്ന് ഉറപ്പാക്കുന്നു.
• Timers: കോൺകറന്റ് റെൻഡറിംഗ്, ജോലികൾ കൈകാര്യം ചെയ്യാനും ഷെഡ്യൂൾ ചെയ്യാനും ആന്തരിക ടൈമറുകൾ ഉപയോഗിക്കുന്നു, ഇത് മെയിൻ ത്രെഡ് സ്വതന്ത്രമായി നിലനിർത്താൻ ലക്ഷ്യമിടുന്നു.Suspense: ഈ ഫീച്ചർ കമ്പോണന്റുകളെ മുഴുവൻ യുഐയെയും ബ്ലോക്ക് ചെയ്യാതെ ഡാറ്റയ്ക്കായി 'കാത്തിരിക്കാൻ' അനുവദിക്കുന്നു, ആ സമയത്ത് ഒരു ഫാൾബാക്ക് യുഐ കാണിക്കുന്നു.

വലിയ റെൻഡറിംഗ് ടാസ്കുകളെ ഫ്രെയിം ബജറ്റ് കവിയാതെ നിർവഹിക്കാൻ കഴിയുന്ന ചെറിയ ഭാഗങ്ങളായി വിഭജിക്കുക എന്നതാണ് ഈ പൈപ്പ്‌ലൈനിന്റെ ലക്ഷ്യം. ഇവിടെയാണ് ഷെഡ്യൂളിംഗ് നിർണായകമാകുന്നത്.

ഷെഡ്യൂളറിന്റെ പങ്ക്

റിയാക്ടിന്റെ ഷെഡ്യൂളറാണ് കോൺകറന്റ് റെൻഡറിംഗിനെ നിയന്ത്രിക്കുന്ന എഞ്ചിൻ. ഇതിന്റെ ഉത്തരവാദിത്തങ്ങൾ ഇവയാണ്:

• അപ്ഡേറ്റ് അഭ്യർത്ഥനകൾ സ്വീകരിക്കുക (ഉദാഹരണത്തിന്, `setState`-ൽ നിന്ന്).
• ഓരോ അപ്ഡേറ്റിനും ഒരു മുൻഗണന നൽകുക.
• മെയിൻ ത്രെഡ് ബ്ലോക്ക് ചെയ്യുന്നത് ഒഴിവാക്കാൻ റെൻഡറിംഗ് എപ്പോൾ തുടങ്ങണമെന്നും നിർത്തണമെന്നും തീരുമാനിക്കുക.
• അനാവശ്യമായ റീ-റെൻഡറുകൾ കുറയ്ക്കുന്നതിന് അപ്ഡേറ്റുകൾ ഒരുമിപ്പിക്കുക (Batching).

ഓരോ ഫ്രെയിമിലും ചെയ്യുന്ന ജോലിയുടെ അളവ് ഒരു നിശ്ചിത പരിധിക്കുള്ളിൽ നിലനിർത്താൻ ഷെഡ്യൂളർ ലക്ഷ്യമിടുന്നു, അതുവഴി ഫ്രെയിം ബജറ്റ് ഫലപ്രദമായി കൈകാര്യം ചെയ്യുന്നു. ഇത് ഒരു വലിയ റെൻഡറിനെ അസിൻക്രണസായി പ്രോസസ്സ് ചെയ്യാൻ കഴിയുന്ന ചെറിയ വർക്ക് യൂണിറ്റുകളായി വിഭജിച്ച് പ്രവർത്തിക്കുന്നു. നിലവിലെ ഫ്രെയിമിന്റെ ബജറ്റ് കവിയാൻ പോകുകയാണെന്ന് ഷെഡ്യൂളർ കണ്ടെത്തിയാൽ, അതിന് നിലവിലെ റെൻഡറിംഗ് ടാസ്ക് താൽക്കാലികമായി നിർത്തി ബ്രൗസറിന് നിയന്ത്രണം വിട്ടുകൊടുക്കാൻ കഴിയും, അതുവഴി ഉപയോക്തൃ ഇൻപുട്ട് അല്ലെങ്കിൽ പെയിന്റിംഗ് പോലുള്ള മറ്റ് നിർണായക ഇവന്റുകൾ കൈകാര്യം ചെയ്യാൻ ബ്രൗസറിന് സാധിക്കും.

റിയാക്ടിൽ ഫ്രെയിം ബജറ്റ് മാനേജ്മെന്റിനുള്ള വഴികൾ

ഒരു കോൺകറന്റ് റിയാക്ട് ആപ്ലിക്കേഷനിൽ നിങ്ങളുടെ ഫ്രെയിം ബജറ്റ് ഫലപ്രദമായി കൈകാര്യം ചെയ്യുന്നതിന് റിയാക്ടിന്റെ കഴിവുകൾ മനസ്സിലാക്കുന്നതും, കമ്പോണന്റ് ഡിസൈനിനും സ്റ്റേറ്റ് മാനേജ്മെന്റിനും വേണ്ടിയുള്ള മികച്ച രീതികൾ സ്വീകരിക്കുന്നതും ഒരുപോലെ പ്രധാനമാണ്.

1. `useDeferredValue`, `useTransition` എന്നിവ ഉപയോഗിക്കുക

ഒരു കോൺകറന്റ് എൻവയോൺമെന്റിൽ വലിയ യുഐ അപ്ഡേറ്റുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള അടിസ്ഥാനശിലകളാണ് ഈ ഹുക്കുകൾ:

• `useDeferredValue`: നിങ്ങളുടെ യുഐ-യുടെ അടിയന്തിരമല്ലാത്ത ഒരു ഭാഗം അപ്ഡേറ്റ് ചെയ്യുന്നത് വൈകിപ്പിക്കാൻ ഈ ഹുക്ക് നിങ്ങളെ അനുവദിക്കുന്നു. വേഗത്തിൽ മാറിക്കൊണ്ടിരിക്കുന്ന ഒരു ഇൻപുട്ടും (ഒരു സെർച്ച് ക്വറി പോലെ) ആ ഇൻപുട്ടിന്റെ ഫലങ്ങൾ പ്രദർശിപ്പിക്കുന്ന ഒരു യുഐ എലമെന്റും (ഒരു സെർച്ച് ഡ്രോപ്പ്ഡൗൺ പോലെ) ഉള്ള സാഹചര്യങ്ങളിൽ ഇത് അനുയോജ്യമാണ്. ഫലങ്ങളുടെ അപ്ഡേറ്റ് വൈകിപ്പിക്കുന്നതിലൂടെ, സെർച്ച് ഫലങ്ങൾ റെൻഡർ ചെയ്യാൻ അൽപ്പം കൂടുതൽ സമയമെടുത്താലും ഇൻപുട്ട് തന്നെ റെസ്പോൺസീവ് ആയി തുടരുന്നുവെന്ന് നിങ്ങൾക്ക് ഉറപ്പാക്കാം.

ഉദാഹരണം: ഒരു തത്സമയ സെർച്ച് ബാർ സങ്കൽപ്പിക്കുക. ഉപയോക്താവ് ടൈപ്പ് ചെയ്യുമ്പോൾ, സെർച്ച് ഫലങ്ങൾ അപ്ഡേറ്റ് ആകുന്നു. സെർച്ച് ലോജിക്കോ റെൻഡറിംഗോ സങ്കീർണ്ണമാണെങ്കിൽ, അത് ഇൻപുട്ട് ഫീൽഡ് ലാഗ് ആകാൻ കാരണമായേക്കാം. സെർച്ച് ടേമിൽ `useDeferredValue` ഉപയോഗിക്കുന്നത്, സെർച്ച് ഫലങ്ങളുടെ കമ്പ്യൂട്ടേഷണലി ഇന്റൻസീവ് ആയ റെൻഡറിംഗ് വൈകിപ്പിക്കുമ്പോൾ, ഇൻപുട്ട് ഫീൽഡ് അപ്ഡേറ്റ് ചെയ്യുന്നതിന് മുൻഗണന നൽകാൻ റിയാക്ടിനെ അനുവദിക്കുന്നു.

            
import React, { useState, useDeferredValue } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  const deferredQuery = useDeferredValue(query);

  const handleChange = (event) => {
    setQuery(event.target.value);
  };

  // Imagine 'searchResults' is a computationally expensive operation
  const searchResults = expensiveSearch(deferredQuery);

  return (
    

      
      

        {searchResults.map(result => (
          
{result.name}
        ))}
      
    
  );
}

            

              
                Copy
              
            
          

• `useTransition`: സ്റ്റേറ്റ് അപ്ഡേറ്റുകളെ 'ട്രാൻസിഷനുകൾ' ആയി അടയാളപ്പെടുത്താൻ ഈ ഹുക്ക് നിങ്ങളെ അനുവദിക്കുന്നു. ട്രാൻസിഷനുകൾ അടിയന്തിരമല്ലാത്ത അപ്ഡേറ്റുകളാണ്, അവയെ റിയാക്ടിന് തടസ്സപ്പെടുത്താൻ കഴിയും. ഒരു വലിയ ലിസ്റ്റ് ഫിൽട്ടർ ചെയ്യുകയോ സങ്കീർണ്ണമായ വ്യൂകൾക്കിടയിൽ നാവിഗേറ്റ് ചെയ്യുകയോ പോലുള്ള, റെൻഡർ ചെയ്യാൻ കൂടുതൽ സമയമെടുത്തേക്കാവുന്ന അപ്ഡേറ്റുകൾ അടയാളപ്പെടുത്തുന്നതിന് ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. `useTransition` ഒരു `startTransition` ഫംഗ്ഷനും ഒരു `isPending` ബൂളിയനും നൽകുന്നു. ട്രാൻസിഷൻ പുരോഗമിക്കുമ്പോൾ ഒരു ലോഡിംഗ് ഇൻഡിക്കേറ്റർ കാണിക്കാൻ `isPending` ഫ്ലാഗ് ഉപയോഗിക്കാം.

ഉദാഹരണം: ഉപയോക്തൃ തിരഞ്ഞെടുപ്പിനെ അടിസ്ഥാനമാക്കി ഫിൽട്ടർ ചെയ്യേണ്ട ഒരു വലിയ ഡാറ്റ ടേബിൾ പരിഗണിക്കുക. ഒരു വലിയ ടേബിൾ ഫിൽട്ടർ ചെയ്യുന്നതിനും വീണ്ടും റെൻഡർ ചെയ്യുന്നതിനും സമയമെടുത്തേക്കാം. ഫിൽട്ടറിംഗ് ട്രിഗർ ചെയ്യുന്ന സ്റ്റേറ്റ് അപ്ഡേറ്റിനെ `startTransition`-ൽ പൊതിയുന്നത്, കൂടുതൽ അടിയന്തിരമായ ഒരു ഇവന്റ് സംഭവിച്ചാൽ ഈ അപ്ഡേറ്റ് തടസ്സപ്പെടുത്താമെന്ന് റിയാക്ടിനോട് പറയുന്നു, ഇത് യുഐ ഫ്രീസ് ആകുന്നത് തടയുന്നു.

            
import React, { useState, useTransition } from 'react';

function DataTable() {
  const [data, setData] = useState([]);
  const [filter, setFilter] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleFilterChange = (event) => {
    const newFilter = event.target.value;
    startTransition(() => {
      setFilter(newFilter);
      // Potentially expensive filtering operation happens here or is triggered
      // by the state update that is now a transition.
    });
  };

  // Assume 'filteredData' is derived from 'data' and 'filter'
  const filteredData = applyFilter(data, filter);

  return (
    

      
      {isPending && 
Loading...
}
      
        {/* Render filteredData */}
      
    
  );
}

            

              
                Copy
              
            
          

2. കമ്പോണന്റ് റെൻഡറിംഗ് ഒപ്റ്റിമൈസ് ചെയ്യുക

കോൺകറൻസി ഉണ്ടെങ്കിൽ പോലും, കാര്യക്ഷമമല്ലാത്ത കമ്പോണന്റ് റെൻഡറിംഗ് നിങ്ങളുടെ ഫ്രെയിം ബജറ്റ് വേഗത്തിൽ തീർക്കും. ഈ ടെക്നിക്കുകൾ ഉപയോഗിക്കുക:

• `React.memo`: ഫംഗ്ഷണൽ കമ്പോണന്റുകൾക്കായി, `React.memo` കമ്പോണന്റിനെ മെമ്മോയിസ് ചെയ്യുന്ന ഒരു ഹയർ-ഓർഡർ കമ്പോണന്റാണ്. അതിന്റെ പ്രോപ്‌സ് മാറിയിട്ടുണ്ടെങ്കിൽ മാത്രമേ അത് വീണ്ടും റെൻഡർ ചെയ്യുകയുള്ളൂ, ഇത് പേരന്റ് റീ-റെൻഡർ ചെയ്യുമ്പോഴും കമ്പോണന്റിന്റെ പ്രോപ്‌സ് അതേപടി തുടരുകയാണെങ്കിൽ അനാവശ്യമായ റീ-റെൻഡറുകൾ തടയുന്നു.
• `useCallback`: കോൾബാക്ക് ഫംഗ്ഷനുകളെ മെമ്മോയിസ് ചെയ്യുന്നു. ഓരോ പേരന്റ് റെൻഡറിലും ഒരു പുതിയ ഫംഗ്ഷൻ ഇൻസ്റ്റൻസ് ഉണ്ടാകുന്നത് കാരണം മെമ്മോയിസ് ചെയ്ത ചൈൽഡ് കമ്പോണന്റുകൾ (`React.memo`) വീണ്ടും റെൻഡർ ചെയ്യുന്നത് തടയാൻ, അവയ്ക്ക് കോൾബാക്കുകൾ കൈമാറുമ്പോൾ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്.
• `useMemo`: ഒരു കമ്പ്യൂട്ടേഷന്റെ ഫലം മെമ്മോയിസ് ചെയ്യുന്നു. ഒരു കമ്പോണന്റിനുള്ളിൽ സങ്കീർണ്ണമായ ഒരു കണക്കുകൂട്ടൽ നടത്തുന്നുണ്ടെങ്കിൽ, `useMemo`-ന് ഫലം കാഷെ ചെയ്യാനും അതിന്റെ ഡിപൻഡൻസികൾ മാറുമ്പോൾ മാത്രം വീണ്ടും കണക്കുകൂട്ടാനും കഴിയും, ഇത് വിലപ്പെട്ട സിപിയു സൈക്കിളുകൾ ലാഭിക്കുന്നു.
• Component Structure and Profiling: വലിയ കമ്പോണന്റുകളെ ചെറുതും കൈകാര്യം ചെയ്യാൻ എളുപ്പമുള്ളതുമായ കമ്പോണന്റുകളായി വിഭജിക്കുക. പെർഫോമൻസ് ബോട്ടിൽനെക്കുകൾ കണ്ടെത്താൻ റിയാക്ട് ഡെവലപ്പർ ടൂൾസ് പ്രൊഫൈലർ ഉപയോഗിക്കുക. ഏതൊക്കെ കമ്പോണന്റുകളാണ് കൂടുതൽ തവണ റീ-റെൻഡർ ചെയ്യുന്നതെന്നോ റെൻഡർ ചെയ്യാൻ കൂടുതൽ സമയമെടുക്കുന്നതെന്നോ കാണാൻ നിങ്ങളുടെ കമ്പോണന്റുകൾ പ്രൊഫൈൽ ചെയ്യുക.

3. കാര്യക്ഷമമായ സ്റ്റേറ്റ് മാനേജ്മെന്റ്

നിങ്ങൾ സ്റ്റേറ്റ് എങ്ങനെ കൈകാര്യം ചെയ്യുന്നു എന്നത് റെൻഡറിംഗ് പെർഫോമൻസിനെ കാര്യമായി സ്വാധീനിക്കും:

• Local State vs. Global State: സ്റ്റേറ്റ് കഴിയുന്നത്ര ലോക്കലായി സൂക്ഷിക്കുക. ഒന്നിലധികം കമ്പോണന്റുകളിൽ സ്റ്റേറ്റ് പങ്കിടേണ്ടിവരുമ്പോൾ, ഒരു ഗ്ലോബൽ സ്റ്റേറ്റ് മാനേജ്മെന്റ് സൊല്യൂഷൻ പരിഗണിക്കുക, എന്നാൽ ഗ്ലോബൽ സ്റ്റേറ്റിലെ അപ്ഡേറ്റുകൾ എങ്ങനെ റീ-റെൻഡറുകൾക്ക് കാരണമാകുന്നു എന്നതിനെക്കുറിച്ച് ശ്രദ്ധിക്കുക.
• Context API Optimization: റിയാക്ടിന്റെ കോൺടെക്സ്റ്റ് API ഉപയോഗിക്കുകയാണെങ്കിൽ, ഒരു കോൺടെക്സ്റ്റ് ഉപയോഗിക്കുന്ന ഏതൊരു കമ്പോണന്റും കോൺടെക്സ്റ്റ് മൂല്യം മാറുമ്പോൾ റീ-റെൻഡർ ചെയ്യുമെന്ന് ഓർക്കുക, അവർക്ക് ആവശ്യമുള്ള കോൺടെക്സ്റ്റിന്റെ ഭാഗം മാറിയിട്ടില്ലെങ്കിൽ പോലും. കോൺടെക്സ്റ്റുകൾ വിഭജിക്കുകയോ കോൺടെക്സ്റ്റ് മൂല്യങ്ങൾക്കായി മെമ്മോയിസേഷൻ ടെക്നിക്കുകൾ ഉപയോഗിക്കുകയോ ചെയ്യുന്നത് പരിഗണിക്കുക.
• Selector Pattern: Redux അല്ലെങ്കിൽ Zustand പോലുള്ള സ്റ്റേറ്റ് മാനേജ്മെന്റ് ലൈബ്രറികൾക്കായി, ഏതെങ്കിലും ഗ്ലോബൽ സ്റ്റേറ്റ് അപ്ഡേറ്റിൽ റീ-റെൻഡർ ചെയ്യുന്നതിനുപകരം, കമ്പോണന്റുകൾ സബ്സ്ക്രൈബ് ചെയ്തിരിക്കുന്ന സ്റ്റേറ്റിന്റെ നിർദ്ദിഷ്ട ഭാഗങ്ങൾ മാറുമ്പോൾ മാത്രം അവ റീ-റെൻഡർ ചെയ്യുന്നുവെന്ന് ഉറപ്പാക്കാൻ സെലക്ടറുകൾ ഉപയോഗിക്കുക.

4. വലിയ ലിസ്റ്റുകൾക്കായി വെർച്വലൈസേഷൻ

ഒരു ലിസ്റ്റിൽ ആയിരക്കണക്കിന് ഇനങ്ങൾ റെൻഡർ ചെയ്യുന്നത് കോൺകറൻസി പരിഗണിക്കാതെ തന്നെ പെർഫോമൻസിനെ സാരമായി ബാധിക്കും. വെർച്വലൈസേഷൻ (വിൻഡോയിംഗ് എന്നും അറിയപ്പെടുന്നു) എന്നത് വ്യൂപോർട്ടിൽ നിലവിൽ ദൃശ്യമാകുന്ന ഇനങ്ങൾ മാത്രം റെൻഡർ ചെയ്യുന്ന ഒരു സാങ്കേതികതയാണ്. ഉപയോക്താവ് സ്ക്രോൾ ചെയ്യുമ്പോൾ, സ്ക്രീനിന് പുറത്തുള്ള ഇനങ്ങൾ അൺമൗണ്ട് ചെയ്യുകയും പുതിയ ഇനങ്ങൾ റെൻഡർ ചെയ്ത് മൗണ്ട് ചെയ്യുകയും ചെയ്യുന്നു. ഇതിനായി `react-window`, `react-virtualized` തുടങ്ങിയ ലൈബ്രറികൾ മികച്ച ടൂളുകളാണ്.

ഉദാഹരണം: ഒരു സോഷ്യൽ മീഡിയ ഫീഡ് അല്ലെങ്കിൽ ഒരു നീണ്ട ഉൽപ്പന്ന ലിസ്റ്റിംഗ്. ഒരേസമയം 1000 ലിസ്റ്റ് ഇനങ്ങൾ റെൻഡർ ചെയ്യുന്നതിനുപകരം, വെർച്വലൈസേഷൻ സ്ക്രീനിൽ ദൃശ്യമാകുന്ന 10-20 ഇനങ്ങൾ മാത്രം റെൻഡർ ചെയ്യുന്നു. ഇത് ഓരോ ഫ്രെയിമിലും റിയാക്റ്റും ബ്രൗസറും ചെയ്യേണ്ട ജോലിയുടെ അളവ് ഗണ്യമായി കുറയ്ക്കുന്നു.

5. കോഡ് സ്പ്ലിറ്റിംഗും ലേസി ലോഡിംഗും

ഇത് നേരിട്ട് ഫ്രെയിം ബജറ്റ് മാനേജ്മെന്റുമായി ബന്ധപ്പെട്ടതല്ലെങ്കിലും, പ്രാരംഭ ജാവാസ്ക്രിപ്റ്റ് പേലോഡ് കുറയ്ക്കുകയും ആവശ്യമുള്ളത് മാത്രം ലോഡ് ചെയ്യുകയും ചെയ്യുന്നത് പെർഫോമൻസ് മെച്ചപ്പെടുത്തുന്നു, കൂടാതെ ബ്രൗസറിലെ മൊത്തത്തിലുള്ള ലോഡ് കുറയ്ക്കുന്നതിലൂടെ പരോക്ഷമായി സഹായിക്കുകയും ചെയ്യും. കമ്പോണന്റുകൾക്കായി കോഡ് സ്പ്ലിറ്റിംഗ് നടപ്പിലാക്കാൻ `React.lazy`, `Suspense` എന്നിവ ഉപയോഗിക്കുക.

            
import React, { Suspense, lazy } from 'react';

const ExpensiveComponent = lazy(() => import('./ExpensiveComponent'));

function App() {
  return (
    

      
My App
      Loading component...
}>